渲染器的diff算法是为了解决当新旧vnode的子节点都为一组节点时，达到相对最小性能开销并实现更新的效果，其本质上还是为了减少操作DOM元素。

这篇文章将介绍vue2使用的双端diff以及vue3使用的快速diff，具体代码可见我的mini-vue3项目commit记录( github.com/4noth1ng/my… )

如果新旧vnode的子节点都是一组节点，最简单的更新方式是什么？ 我们只需要卸载所有旧节点，挂载新节点即可。那么为了减少性能开销，可以如何优化呢？

事实上，如果新旧节点的子节点全部不同（包括tag和content），这就是最坏情况，我们只能进行卸载全部旧节点，挂载新节点的操作。但如果存在可复用节点，我们就无需进行卸载挂载操作，而是直接进行复用，并将其移动到正确的位置。 那么我们优化的方向就有两个：

首先我们要知道vnode上的三个属性:

我们将两个type以及key相同的vnode定义为相同的虚拟节点，这样的两个虚拟节点可以进行复用。

我们对dom元素的操作基本为：移动、添加、删除，我们会引入一个锚点节点anchor，作为dom元素移动的相对坐标。 对于不可复用的dom元素，我们需要卸载这些旧的dom元素，并将新的dom元素挂载上。

双端diff指的是：在新旧两组子节点的四个端点之间分别进行比较，并试图找到可复用的节点。下面我们假设所有节点的type相同

我们定义四个索引：oldStartIdx, oldEndIdx, newStartIdx, newEndIdx，分别对应四个节点oldStartVNode, oldEndVNode, newStartVNode, newEndVNode，并进行四步的循环，循环条件为oldStartIdx < = oldEndIdx && newStartIdx